<template>
	<section class="scholl pb50rem experience">
		<div class="bg-white">
			<div class="border-box head-experience white border-b20">
				<div class="lucky-number align-center fs16">
					<div class="experience-content" >
						<div class="experience-bg"></div>
						<div class="experience-bg-white-father">
							<div class="experience-bg-white" id="experience-bg"></div>
						</div>
						<div class="experience-bg-img"></div>
					</div>
					<div class="experience-text">
						<i>{{ exprience_list.luck }}</i>
						<p>
							幸运值
						</p>
						<p class="mt10rem mb10rem fs24rem">
							·{{ exprience_list.growth_level }}·
						</p>
					</div>				
				</div>
				<div class="experience-info layout layout-around pb40rem">
					<div class="align-center w50 border-right">
						<p class="fs24">
							{{ exprience_list.exprience_day }}
						</p>
						<span class="fs24rem">
							签到天数
						</span>
					</div>
					<div class="align-center w50">
						<p class="fs24">
							{{ exprience_list.exprience_times}}
						</p>
						<span class="fs24rem">
							参与体验次数
						</span>
					</div>
				</div>
				<div class="experience-scroll-navbar border-b">
					<scroll-navbar :channels="order_status_list" key-name="text"  key-id="str" v-model="strId"></scroll-navbar>
				</div>
			</div>
			
			<div>
				<ul v-infinite-scroll="loadData" 
					infinite-scroll-disabled="loading" 
					infinite-scroll-distance="10"
					v-if="flag"
					class="goods-list"
				>
					<li v-for="(item,index) in order_list" 
						:key="index"
						@click="goBack(item)"
					>
						<div class="pl30rem pr30rem pt30rem pb30rem">
							<div class="layout layout-juscon fs24rem c999 pb20rem border-b">
								<span>
									{{item.status}}申请时间: {{ item.apply_time }}
								</span>
								<span class="red" >
									{{ order_status_arr[item.order_status]}}
								</span>
							</div>
							<div class="pt30rem layout layout-juscon goods-info">
								<img class="goods-img" :src="img_url+item.goods_picture">
								<div class="fs28rem">
									<div class="goods-name bold">
										{{ item.goods_name }}
									</div>
									<div class="layout layout-juscon fs24rem">
										<span class="buy-station red align-center" v-if="item.order_status == 7">
											未揭晓
										</span>
										<span class="buy-station red align-center" v-else-if="item.order_status == -3">
											待揭晓
										</span>
										<span class="buy-station red align-center" v-else>
											已揭晓
										</span>
										<div class="time c999 flex-left" v-if="item.end_time - item.current > 0">
											<span>剩余</span>
											<countdown :data="item.end_time - item.current"  v-if='item.end_time'></countdown>
										</div>
									</div>
								</div>
							</div>
						</div>	
					</li>

				</ul>	
				<template v-else>
					<default :imgUrl="img" explain='暂无信息'></default>
				</template>										
			</div>	
		</div>		
	</section>
</template>

<script>
	import { myExprience } from "@/api/ordering";	
	import ScrollNavbar from '@/components/Scroll-navbar';
	import { InfiniteScroll } from 'mint-ui';
	import $toast from '@/utils/toast';
	import Default from "@/components/Default";
	import Countdown from '@/components/Countdown';
	export default {
		components: 
		{
			Countdown,
			ScrollNavbar,
			Default
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				last_time         : 0,
				selected          : 0,
				exprience_list    : '',
				order_list        : [],
				pay_status        : [],
				strId             : 'all',
				img_url           : process.env.IMG_URL,
				flag              : true,
				img               : require('../../../assets/icon-coupon.png'),
				loading           : false,
				page              : 1,
				on_deg            : 0,
				order_status_list : [
					{ id: 0, str: 'all',             text: '全部预约'},
					{ id: 7, str: 'booking',         text: '预约中'},
					{ id: 6, str: 'booking_success', text: '预约成功'},
					{ id: 8, str: 'booking_failed',  text: '预约失败'},
					{ id: 2, str: 'waitReceipt',     text: '待收货'},
				],
				order_status_arr: ['全部预约', '待收货', '预约中', '预约成功', '预约失败'],
				uid : this.$route.query.uid,
			}
		},
		watch:
		{
			strId(nValue)
			{
				this.loadInitData();
			}
		},
		methods: 
		{
			loadData()
			{
				// 防止多次加载,loading = true,阻止加载
				this.loading = true;
				var params = {
					uid          : this.uid ? parseInt(this.uid) : parseInt(localStorage.getItem('uid')),
					order_status : this.strId,
					page         : this.page++,
					item         : 10,
				};
				myExprience(params).then(res => {
					this.exprience_list = res.data.top;
					if( res.data.bottom.length > 0 )
					{ 
						this.order_list = this.order_list.concat(res.data.bottom);
						this.pay_status = res.data.bottom.pay_status;
						this.loading    = false;
					}
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if( res.data.bottom.length < params.item )
					{
						this.loading = true;
					}
					this.calculate();
				});	
			},
		
			loadInitData()
			{
				this.page = 1;
				this.flag = true;
				this.order_list = [];
				this.loadData();				
			},
			calculate()
			{
				if(this.exprience_list.luck <= 99)
					this.on_deg =  Math.round(this.exprience_list.luck / 99 * 180);
				else if(99 < this.exprience_list.luck <= 666)
					this.on_deg =  Math.round(this.exprience_list.luck / 666 * 180);
				else if(666 < this.exprience_list.luck <= 4999)
					this.on_deg =  Math.round(this.exprience_list.luck / 4999 * 180);
				else if(4999 < this.exprience_list.luck <= 9999)
					this.on_deg =  Math.round(this.exprience_list.luck / 9999 * 180);
				else if(9999 < this.exprience_list.luck <= 499999)
					this.on_deg =  Math.round(this.exprience_list.luck / 499999 * 180);
				else
					this.on_deg = 0;

			 	var deg = 0;
 				var time = setInterval(() => {
 					deg = this.on_deg + 180;
					document.getElementById('experience-bg').style.transform = 'rotate('+ deg +'deg)';
					document.getElementById('experience-bg').style.webkitTransform = 'rotate('+ deg +'deg)';
					document.getElementById('experience-bg').style.MozTransform = 'rotate('+ deg +'deg)';
					clearInterval(time)
				},100)
			},
			goBack(item)
			{
				if(item.end_time - item.current > 0)
					this.$router.push("/detail/experience-detail/"+item.goods_id+"?status=2")
				else
					this.$router.push("/detail/experience-detail/"+ item.goods_id + "?status=2&ty=true")
			}
		},		
		created()
		{
			window.scrollTo(0,0); 		
		}				
	}
	
</script>

<style lang="less">
.experience{
	.goods-list{
		overflow-y: scroll;
		height: 23rem;
	}

	.experience-content
	{
		width: 430/28rem;
		position: relative;
		height: 235/28rem;
		margin-right: auto;
		margin-left: auto;
	}
	.experience-bg
	{
		background: #ff476e;
		height: 232/28rem;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 8;
		width: 423/28rem;
	    transform: translate(-50%,0);
	}
	.experience-text
	{
	    position: absolute;
	    z-index: 10;
	    top: 14%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    width: 100%;
	    text-align: center;
	    i
	    {
	    	font-size: 80/28rem;
	    }
	}
	.experience-bg-img
	{
		position: absolute;
		top: 0;
		left: 50%;
	    transform: translate(-50%,0);
		z-index: 9;
		width: 423/28rem;
		height: 232/28rem;
		background: url("../../../assets/experience-bg-img.png") no-repeat center center / 100% 100%;
	}
	.experience-bg-white-father{
		position: absolute;
		top: 0;
		left: 50%;
		height: 232/28rem;
		width: 423/28rem;
		z-index: 9;
		overflow: hidden;
		transform: translate(-50%,0%);
	}
	.experience-bg-white
	{
		position: absolute;
		top: 9%;
		left: 0%;
		height: 215/28rem;
		z-index: 9;
		border: 40/28rem solid #fff;
		transform: rotate(180deg);
	    border-radius: 215/28rem 215/28rem 0 0;
	   	width: 425/28rem;
	    transform-origin: center bottom;
		transition: all .5s linear;
		-moz-transition:all .5s linear;
		// animation: myfirst 2s;
		// animation-fill-mode:forwards;
	}
	.border-box{
		box-sizing: border-box;
	}
	.border-box * {
		box-sizing: border-box;
	}
	.head-experience{
		width: 100%;
		background-color: #ff0036;
		.lucky-number{
			height: 300/28rem;
		}
		.experience-info{						
			.border-right{
				border-right: 1px solid #f0a4b4;
			}
		}						
	}
	.experience-scroll-navbar{
		height: 100/28rem;
	}
	.goods-list{
		border-bottom: 10px solid #f5f5f5;
		.red{
			color: #ff0036;
		}
		.goods-img{
			width: 120/28rem;
			height: 120/28rem;
		}
		.goods-info{			
			align-items: flex-start;
			.goods-name{
				height: 88/28rem;
				width: 540/28rem;
				line-height: 1.5;
				overflow: hidden;
			}
			.buy-station{
				width: 95/28rem;
				height: 37/28rem;
				background-color: #ffe5eb;
			}
		}
	}
	.goods-list:nth-last-of-type(1){
		border-bottom:0px;
	};
	
	.default-father{
		width: 7rem !important;
		height: 7rem !important;
	}
}
	
</style>